<template>
  <div id="app">
      <el-tree
          :data="fileTree"
          :props="treeProps"
          show-checkbox
          @check-change="handleCheckChange"
      />
  </div>
</template>

<script>
export default {
  data() {
      return {
          fileTree: [],
          treeProps: {
              label: 'name',
              children: 'children'
          }
      };
  },
  mounted() {
      this.fetchFileTree();
  },
  methods: {
      fetchFileTree() {
          this.$axios.get('/file - tree')
            .then(response => {
                  this.fileTree = response.data;
              })
            .catch(error => {
                  console.error('Error fetching file tree:', error);
              });
      },
      handleCheckChange(data, checked, indeterminate) {
          console.log(data, checked, indeterminate);
      }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans - serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>